{% if isFramework("vue") %}
```js
const KEY_UP = 'ArrowUp';
const KEY_DOWN = 'ArrowDown';

const MyGrid = {
   template: `
      <ag-grid-vue
          class="ag-theme-quartz"
          :columnDefs="columnDefs">
      </ag-grid-vue>
   `,
   components: {
       'ag-grid-vue': AgGridVue
   },
   data: function () {
       return {
           columnDefs: [
              {
                  headerName: "Value Column",
                  field: "value",
                  suppressKeyboardEvent: params => {
                      console.log('cell is editing: ' + params.editing);
                      console.log('keyboard event:', params.event);
               
                      // return true (to suppress) if editing and user hit up/down keys
                      const key = params.event.key;
                      const gridShouldDoNothing = params.editing && (key === KEY_UP || key === KEY_DOWN);
                      return gridShouldDoNothing;
                  }
              }
           ]
       }
   },

   // rest of the component
}
```
{% /if %}
